﻿<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/commonLayUI :: common_head_LayUi(~{::title},~{},~{})">
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/static/global/plugins/elementUI/index.css}">
    <title>index</title>
</head>
<style>
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: right;
        line-height: 800px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: right;
        line-height: 800px;
    }
</style>
<body>
<div id="app" onselectstart="return false">
    <div style="text-align: left;margin-left: 5px"><h4>数据质量标准管理</h4></div>
    <div class="layui-container">
        <div class="layui-row" style="margin-left: -40px;margin-top: 15px">
            <div class="layui-col-md1">
                <div class="layui-inline" style="margin-left: -100px;">
                    <button type="button" class="btn btn-success" id="layui-btn-insert">
                        <i class="el-icon-circle-plus-outline"></i>添加
                    </button>
                    <button type="button" class="btn btn-success" id="layui-btn-update" style="margin-left: 5px">
                        <i class="el-icon-edit"></i>修改
                    </button>
                    <input class="layui-input" type="text" lay-verify="" id="tree_id" name="tree_id"
                           placeholder="ID" autocomplete="off" style="display: none">
                </div>
                <!--渲染左侧视图树-->
                <div id="initTreeDocument" style="margin-left: -150px"></div>
            </div>
            <div class="layui-col-md11">
                <!--渲染右侧视图-->
                <iframe id="iframe" src="/qa/biaozhun/list" width="100%" height="800px" frameborder="0">

                </iframe>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    var contentPath = /*[[@{/}]]*/ '';
    layui.use(['tree', 'form', 'layer'], function () {
        var tree = layui.tree;
        var layer = layui.layer;
        var form = layui.form;
        //监听提交
        form.on('submit(submitForm)', function (data) {
            let sendData = JSON.stringify(data.field);
            axios.post('/biaozhun/biaozunAdd', sendData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    $('#layer-open-Mulu').style.display = 'none';
                    /*延迟回去*/
                    layer.msg(resp.data.msg, {icon: 1, time: 1000}, function () {
                        layer.close('layui-layer-insertMuLu');
                    })
                }
            }).catch(error => {
                console.log(error)
            });
            return true;
        });
        // 渲染下拉框
        selectLoad();
        // 渲染树形菜单
        var inst1 = tree.render({
            elem: '#initTreeDocument', //绑定元素
            id: 'TreeDocument',
            edit: ['del'],
            onlyIconControl:true,
            data: [[${muluData}]], //Thymeleaf后台返回
            click: function (obj) {
                //当前点击的树节点
                var currTreeId = obj.data.id;
                //上一次点击的树节点id
                var beforeTreeId = $('#tree_id').val();
                //对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式
                if (currTreeId !== beforeTreeId) {
                    $('div [data-id="' + currTreeId + '"] div').eq(1).last().css('background-color', '#AAB5BC');
                    $('div [data-id="' + beforeTreeId + '"] div').eq(1).last().css('background-color', '');
                    $('#tree_id').val(obj.data.id);
                }
                // 点击之后刷新右侧的标准表格
                document.getElementById("iframe").src="/qa/biaozhun/list?muluId="+ obj.data.id;
            },
            operate: function (obj) {
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素
                //Ajax 操作
                var id = data.id; //得到节点索引
                if (type === 'add') { //增加节点
                    //返回 key 值
                    obj.data.parentId = data.id;
                    obj.data.title = "新增数据标准";
                    obj.data.name = "新增数据标准";
                    obj.data.id = 9999;
                    return data.parentId;
                } else if (type === 'update') { //修改节点
                    let updateVarT = elem.find('.layui-tree-txt').html(); //得到修改后的内容
                    let sendData = data;
                    sendData.title = updateVarT;
                    axios.post(contentPath + 'biaozhun/muluUpdate', JSON.stringify(sendData), {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(resp => {
                        if (resp.data.code == 200) {
                            layer.msg("修改成功", {icon: 1, time: 2000, shift: 6});
                        } else {
                            layer.msg("修改失败" + resp.data.msg, {icon: 2, time: 2000, shift: 6});
                        }
                    }).catch(error => {
                        console.log(error)
                    });
                } else if (type === 'del') { //删除节点
                    // 判断该节点是否是独立节点，无子节点
                    axios.post(contentPath + 'biaozhun/muluDel?id=' + data.id, {}, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(resp => {
                        if (resp.data.code == 200) {
                            layer.msg("删除成功", {icon: 1, time: 2000, shift: 6});
                            return true;
                        } else {
                            layer.msg(resp.data.msg, {icon: 2, time: 2000, shift: 6});
                            // 刷新回去
                            tree.reload('TreeDocument', {})
                            return false;
                        }
                    }).catch(error => {
                        console.log(error)
                    });
                }
                ;
            }
        });
        // 绑定点击事件
        $('#layui-btn-insert').on('click', function () {
            layer.open({
                type: 2,
                title: '添加目录',
                id: 'layui-layer-insertMuLu',
                area: ['35%', '40%'],
                content: "/qa/sjbz/muluDetail",
                success: function (layero) {

                }
            });
        });
        $('#layui-btn-update').on('click', function () {
            // 获取绑定的树菜单选中
            var thisSelectValue = $('#tree_id').val();
            if (thisSelectValue != null && thisSelectValue != '') {
                layer.open({
                    type: 2,
                    title: '修改目录',
                    id: 'layui-layer-insertMuLu',
                    area: ['35%', '40%'],
                    content: "/qa/sjbz/muluDetail?id=" + thisSelectValue,
                    success: function (layero) {

                    }
                });
                return true;
            } else {
                layer.msg("请选择菜单", {icon: 2, time: 2000, shift: 6});
                return false;
            }
        });

    });

    // 获取所有选中的节点id
    function getCheckedId(data) {
        var id = "";
        $.each(data, function (index, item) {
            if (id != "") {
                id = id + "," + item.id;
            } else {
                id = item.id;
            }
            //item 没有children属性
            if (item.children != null) {
                var i = getCheckedId(item.children);
                if (i != "") {
                    id = id + "," + i;
                }
            }
        });
        return id;
    }

    function selectLoad() {
        axios.post('/qa/biaozhun/getMuluSelect', {}, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(resp => {
            if (resp.data.code == 200) {
                for (var i = 0; i < resp.data.data.length; i++) {
                    $("#sjzlbzml").append("<option value=\"" + resp.data.data[i].id + "\">" + resp.data.data[i].title + "</option>");
                }
                layui.form.render("select");
            }
        }).catch(error => {
            console.log(error)
        });
    }
</script>
</body>
</html>